/*
 * @Author: Wxx
 * @Date: 2022-02-24 15:51:00
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-25 15:39:03
 * @Description:
 */
import React, { Component } from "react";
import { Switch, Route, Redirect, NavLink } from "react-router-dom";
import MSwiper from "../../swiper/Swiper";
import SwiperItem from "../../swiper/SwiperItem";
import Comingsoon from "./films/Comingsoon";
import Nowplaying from "./films/Nowplayying";
import axios from "axios";

import styles from "./css/Film.module.css";
export default class Films extends Component {
  state = {
    list: [],
  };
  componentDidMount() {
    axios({
      url: "https://m.maizuo.com/gateway?type=2&cityId=440100&k=1039999",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.2.0","e":"16454281163713789501374465","bc":"440100"}',
        "X-Host": " mall.cfg.common-banner",
      },
    }).then((res) => {
      this.setState({
        list: res.data.data,
      });
    });
  }
  render() {
    return (
      <div>
        <MSwiper>
          {this.state.list.map((item) => (
            <SwiperItem key={item.bannerId}>
              <img
                src={item.imgUrl}
                alt={item.name}
                style={{ width: "100%" }}
              />
            </SwiperItem>
          ))}
        </MSwiper>
        <div className={styles.tab_bar}>
          <NavLink to="/films/nowplaying" activeClassName={styles.active}>
            正在热映
          </NavLink>
          <NavLink to="/films/comingsoon" activeClassName={styles.active}>
            即将上映
          </NavLink>
        </div>
        <Switch>
          <Route path="/films/comingsoon" component={Comingsoon} />
          <Route path="/films/nowplaying" component={Nowplaying} />
          <Redirect from="/films" to="/films/nowplaying" />
        </Switch>
      </div>
    );
  }
}
